<template>
  <div class="home">
    <div class="container">
      <h1 class="page-title">正在热映</h1>
      <el-row :gutter="20">
        <el-col :xs="12" :sm="8" :md="6" v-for="movie in movies" :key="movie.id">
          <el-card class="movie-card mb-20" :body-style="{ padding: '0px' }">
            <div class="movie-poster">
              <img :src="movie.poster" :alt="movie.name">
            </div>
            <div class="movie-info">
              <h3>{{ movie.name }}</h3>
              <p class="rate">
                <el-rate
                  v-model="movie.rate"
                  disabled
                  show-score
                  text-color="#ff9900"
                  score-template="{value}">
                </el-rate>
              </p>
              <p class="director">导演：{{ movie.director }}</p>
              <p class="actors">主演：{{ movie.stars }}</p>
              <el-button type="primary" @click="goToDetail(movie.id)">购票</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { hotMoviesApi } from '../api/movie'


export default {
  name: 'Home',
  data() {
    return {
      movies: [ {
        id: 1,
        poster: require('@/assets/images/奥本海默.jpg'),
        name: '奥本海默',
        rate: 9.3,
        director: '克里斯托弗·诺兰',
        stars: '基里安·墨菲,艾米莉·布朗特,马特·达蒙'
      },
      {
        id: 2,
        poster: require('@/assets/images/封神第一部.webp'),
        name: '封神第一部',
        rate: 8.7,
        director: '乌尔善',
        stars: '费翔,李雪健,黄渤'
      },
      {
        id: 3,
        poster: require('@/assets/images/流浪地球2.webp'),
        name: '流浪地球2',
        rate: 9.4,
        director: '郭帆',
        stars: '吴京,刘德华,李雪健'
      },
      {
        id: 4,
        poster:  require('@/assets/images/蜘蛛侠-平行宇宙.webp'),
        name: '蜘蛛侠：平行宇宙',
        rate: 9.1,
        director: '鲍勃·佩尔西凯蒂',
        stars: '沙梅克·摩尔,海莉·斯坦菲尔德'
      },
      {
        id: 5,
        poster: require('@/assets/images/长安三万里.webp'),
        name: '长安三万里',
        rate: 9.0,
        director: '谢君伟,邹靖',
        stars: '杨天翔,凌振赫,吴俊全'
      },
      {
        id: 6,
        poster:  require('@/assets/images/芭比.webp'),
        name: '芭比',
        rate: 8.5,
        director: '格蕾塔·葛韦格',
        stars: '玛格特·罗比,瑞恩·高斯林'
      },
      {
        id: 7,
        poster:  require('@/assets/images/满江红.webp'),
        name: '满江红',
        rate: 9.2,
        director: '张艺谋',
        stars: '沈腾,易烊千玺,张译'
      },
      {
        id: 8,
        poster: require('@/assets/images/阿凡达-水之道.webp'),
        name: '阿凡达：水之道',
        rate: 8.8,
        director: '詹姆斯·卡梅隆',
        stars: '萨姆·沃辛顿,佐伊·索尔达娜'
      },
      {
        id: 9,
        poster: require('@/assets/images/消失的她.webp'),
        name: '消失的她',
        rate: 7.9,
        director: '崔睿',
        stars: '朱一龙,倪妮,文咏珊'
      },
      {
        id: 10,
        poster: require('@/assets/images/八角笼中.jpg'),
        name: '八角笼中',
        rate: 8.3,
        director: '王宝强',
        stars: '王宝强,陈永胜,史彭元'
      }]
    }
  },
  created(){
	  this.handleHotMovies();
	  },
  methods: {
    goToDetail(id) {
      this.$router.push(`/movie/${id}`)
    },
	
	async handleHotMovies(){
		const data=await hotMoviesApi(10);
		console.log(data.results);
		this.movies=data.results;
		
	}
  } 
}
</script>

<style scoped>
.movie-card {
  margin-bottom: 20px;
  transition: all 0.3s;
}

.movie-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}

.movie-poster {
  height: 400px;
  overflow: hidden;
}

.movie-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.movie-info {
  padding: 14px;
}

.movie-info h3 {
  margin: 0;
  font-size: 16px;
  color: #303133;
}

.rating {
  margin: 10px 0;
}

.director, .actors {
  margin: 5px 0;
  font-size: 14px;
  color: #606266;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.el-button {
  width: 100%;
  margin-top: 10px;
}
</style>
